<template>
    <van-skeleton title :row="3" />
    <div>
<van-nav-bar
  title="标题"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
  fixed
/>
<div style="height: 45px;"></div>
<van-search
  v-model="value"
  shape="round"
  background="#4fc08d"
  placeholder="请输入搜索关键词"
  @search="onSearch"
/>
<van-grid>
  <van-grid-item :icon="item.image_src" :text="item.name" v-for="item in catitemsApiData"/>
  <van-grid-item :icon="item.image_src" :text="item.name" v-for="item in catitemsApiData"/>
</van-grid>
<div class="a1">
    <van-image
  width="160"
  height="160"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<p>俄国人符合规范</p>
</div>
<div class="a2">
    <van-image
  width="160"
  height="160"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<p>的规范化和递归算法</p>
</div>
<div class="a3">
    <van-image
  width="160"
  height="160"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<p>俄国人符合规范</p>
</div>
<div class="a4">
    <van-image
  width="160"
  height="160"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<p>的规范化和递归算法</p>
</div>
<div class="a5">
    <van-image
  width="160"
  height="160"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<p>俄国人符合规范</p>
</div>
<div class="a6">
    <van-image
  width="160"
  height="160"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<p>的规范化和递归算法</p>
</div>
<div class="a7">
    <van-image
  width="160"
  height="160"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<p>俄国人符合规范</p>
</div>
<div class="a8">
    <van-image
  width="160"
  height="160"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<p>的规范化和递归算法</p>
</div>
<div class="a9">
    <van-image
  width="160"
  height="160"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<p>俄国人符合规范</p>
</div>
<div class="a10">
    <van-image
  width="160"
  height="160"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<p>的规范化和递归算法</p>
</div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { catitemsApi } from "@/api/api";
import router from "@/router";
let catitemsApiData=ref([])
catitemsApi().then(res=>{
    catitemsApiData.value=res.data.message
    console.log('列表',res.data.message);
});
const onSearch=()=>{
  router.push('/sousuo')
}
</script>

<style scoped>
.a1{
    width: 160px;height: 200px;
    margin: 10px;float: left;
 background-color: aqua;
}
.a2{
    width: 160px;height: 230px;
    margin: 10px;float: left;
    background-color: aqua;
}
.a3{
    width: 160px;height: 220px;
    margin: 10px;float: left;
 background-color: aqua;
}
.a4{
    width: 160px;height: 230px;
    margin: 10px;float: left;
    background-color: aqua;
}
.a5{
    width: 160px;height: 190px;
    margin: 10px;float: left;
 background-color: aqua;
}
.a6{
    width: 160px;height: 240px;
    margin: 10px;float: left;
    background-color: aqua;
}
.a7{
    width: 160px;height: 185px;
    margin: 10px;float: left;
 background-color: aqua;
}
.a8{
    width: 160px;height: 200px;
    margin: 10px;float: left;
    background-color: aqua;
}
.a9{
    width: 160px;height: 240px;
    margin: 10px;float: left;
 background-color: aqua;
}
.a10{
    width: 160px;height: 230px;
    margin: 10px;float: left;
    background-color: aqua;
}
</style>